<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/main-layout.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pe="http://primefaces.org/ui/extensions">

    <ui:define name="title">
        <h:outputText value="#{msg.sign_in_child_title}"></h:outputText>
    </ui:define>
    <ui:define name="content">
        <h:panelGroup id="messagePanel" layout="block">
            <h:messages globalOnly="true" errorStyle="color: red" infoStyle="color: green" />
        </h:panelGroup>
        <h4>#{msg.sign_in_child_title}</h4>
        <span class="required-label">* required</span>
        <p/>
        <h:form id="signInChildForm">
            <h:panelGrid columns="3">
                <h:outputLabel value="#{msg.parent_id_label}" for="parentId" />
                <h:selectOneMenu styleClass="formSelect" id="parentId" value="#{timeWatched.parentId}"
                                 title="#{msg.parentid_label}" required="true"
                                 converterMessage="#{msg.required_parentid_message}">
                    <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                    <f:selectItems value="#{formList.parentIDs}" />
                </h:selectOneMenu>
                <h:message for="parentId"  errorStyle="color: red" />
                <h:outputLabel value="#{msg.child_id_label}" for="childId" />
                <h:selectOneMenu styleClass="formSelect" id="childId" value="#{timeWatched.childId}"
                                 title="#{msg.childid_label}" required="true"
                                 converterMessage="#{msg.required_childrenid_message}">
                    <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                    <f:selectItems value="#{formList.childrenIDs}" />
                </h:selectOneMenu>
                <h:message for="childId"  errorStyle="color: red" />
                <h:outputLabel styleClass="formLabel" value="#{msg.date_label}" for="dateIn" />
                <p:calendar id="dateIn" value="#{timeWatched.dateIn_Out}" title="#{msg.date_label}"
                            required="true" requiredMessage="#{msg.required_date_message}" mode="popup"
                            navigator="true" mindate="${timeWatched.minDate}" maxdate="${timeWatched.maxDate}"
                            pattern="dd/MM/yyyy">
                </p:calendar>
                <h:message for="dateIn"  errorStyle="color: red" />
                <h:outputLabel value="#{msg.time_label}" for="hourIn" />
                <h:panelGrid columns="3">
                    <h:selectOneMenu styleClass="formSelect formSelectMini" id="hourIn" value="#{timeWatched.hour}" title="#{msg.hour_label}"
                                     required="true">
                        <f:selectItems value="#{timeWatched.hours}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu styleClass="formSelect formSelectMini" id="minIn" value="#{timeWatched.minute}" title="#{msg.min_label}"
                                     required="true">
                        <f:selectItems value="#{timeWatched.minutes}" />
                    </h:selectOneMenu>
                    <h:selectOneMenu styleClass="formSelect formSelectMini" id="meridiem" value="#{timeWatched.meridiem}" required="true" >
                        <f:selectItems value="#{timeWatched.meridiems}" />
                    </h:selectOneMenu>
                </h:panelGrid>
                <h:message for="hourIn"  errorStyle="color: red" />
                <h:outputLabel styleClass="formLabel" value="#{msg.watch_code_label}" for="watchCategory" />
                <h:selectOneMenu styleClass="formSelect" id="watchCategory" value="#{timeWatched.watchCode}" required="true"
                                 converterMessage="#{msg.required_watch_code_message}">
                    <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                    <f:selectItems value="#{timeWatched.watchCodes}" var="watchCodeItem"
                                   itemValue="#{watchCodeItem}" itemLabel="#{watchCodeItem.label}" />
                </h:selectOneMenu>
                <h:message for="watchCategory"  errorStyle="color: red" />
                <h:commandButton action="#{home.mainMenu}" value="#{msg.home_button_label}" immediate="true" />
                <h:commandButton action="#{timeWatched.signInChild}" value="#{msg.save_button_label}" />
            </h:panelGrid>
        </h:form>
    </ui:define>
</ui:composition>